<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <el-form-item prop="username">
      <el-input size="small" @keyup.enter.native="handleLogin" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名">
        <i slot="prefix" class="icon-yonghu"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small" name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="请输入密码">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
        <i slot="prefix" class="icon-mima"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="code" style="display:none">
      <el-row :span="24">
        <el-col :span="14">
          <el-input size="small" @keyup.enter.native="handleLogin" :maxlength="code.len" name="imagecode" type="text"  v-model="loginForm.imagecode" placeholder="请输入验证码">
            <i slot="prefix" class="icon-yanzhengma"></i>
          </el-input>
        </el-col>
        <el-col :span="10">
          <div class="login-code" style="display:none">
            <span class="login-code-img" @click="refreshCode" v-if="code.type == 'text'">{{code.value}}</span>
            <img :src="imgCodeImg" @click="refreshCode" alt="验证码" class="login-code-img" v-else/>
            <!-- <i class="icon-shuaxin login-code-icon" @click="refreshCode"></i> -->
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import md5 from 'js-md5'
import configInfo from '@/config/appconfig'
import { getVerificationCode } from '@/api/auth/service/index'
import { getToken, removeToken} from '@/utils/auth' // getToken from cookie

export default {
  name: 'userlogin',
  data() {
    return {
      imgCodeImg: '',
      redirect_uri: '',
      appId: '',
      platformId: '',
      loginForm: {
        username: '',
        password: '',
        imgCodeImg: '',
        appId: '',
        randomStr: ''
      },
      code: {
        src: '/admin/code',
        value: '',
        len: 4,
        type: 'image'
      },
      loginRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, message: '密码长度最少为4位', trigger: 'blur' }
        ],
        imgCodeImg: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' }
        ]
      },
      passwordType: 'password'
    }
  },
  created() {
    this.refreshCode()
  },
  mounted() {
    console.log('mounted success')
    this.redirect_uri = this.$route.query.redirect_uri
    this.appId = this.$route.query.appId
    console.log(this.appId)
    console.log(this.redirect_uri)
  },
  props: [],
  methods: {
    refreshCode() {
      console.log('刷新二维码')
      getVerificationCode().then(response => {
        this.imgCodeImg = 'data:image/png;base64,' + response.data
      })
      
    },
    showPassword() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    handleLogin() {
      this.loginForm.password = md5.hex(md5.hex(this.loginForm.password) + configInfo.pwdSalt)
      this.loginForm.appId = this.appId
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
            this.loading = false
            console.log('login success')
            console.log(this.redirect_uri)
            if(this.redirect_uri == undefined){
              this.$router.push({ path: '/' })
            }else{
              var uri = this.redirect_uri + "#/?token=" + getToken()
              console.log(uri)
              window.location.href = uri
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style>

</style>